<template>
  <div class="xtx-goods-page">
    <div class="container">
      <!-- 商品信息 -->
      <div class="goods-info">
        <div class="media">
          <goods-images
            :images="shopStore.shopInfo.pictures"
            v-if="shopStore.shopInfo.pictures?.length"
          />
          <goodsSales />
        </div>
        <div class="spec">
          <GoodsName :goods="shopStore.shopInfo" />
          <el-button
            type="warning"
            class="mt-[50px]"
            style="width: 200px"
            v-if="!isCollect"
            @click="coolect"
            >收藏</el-button
          >
          <el-button
            type="danger"
            class="mt-[50px]"
            style="width: 200px"
            v-if="isCollect"
            @click="cancel"
            >取消收藏</el-button
          >
          <el-button
            type="primary"
            class="mt-[50px]"
            style="width: 200px"
            @click="buyShop"
            v-if="!isBuy"
            >预约</el-button
          >
          <el-button v-else class="mt-[50px]" style="width: 200px" disabled
            >已经预约</el-button
          >
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="goods-footer">
        <div class="goods-article">
          <!-- 商品+评价 -->
          <GoodsTabs :goods="shopStore.shopInfo" />
          <!-- 注意事项 -->
          <div class="goods-warn">
            <goodsWarning />
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="预约试驾"
      width="500"
      @open="open"
    >
      <div class="dialog-content flex items-center justify-center pt-[30px]">
        <span>试驾时间：</span>
        <el-date-picker
          v-model="time"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择试驾时间"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import goodsImages from "./components/goodsImage.vue";
import goodsSales from "./components/goodsSales.vue";
import GoodsName from "./components/goods-name.vue";
import GoodsTabs from "./components/goods-tabs.vue";
import goodsWarning from "./components/goods-warning.vue";
import { useShopStore } from "@/store/modules/shop";
import { useRoute } from "vue-router";
import { collectItem, cancelItem, searchItemCollect } from "@/api/shop";
import { ElMessage, dayjs } from "element-plus";
import { ref } from "vue";
import { onMounted } from "vue";
import { addCart, getCartList } from "@/db/cart";
import { useUserStoreHook } from "@/store/modules/user";
import router from "@/router";
const shopStore = useShopStore();
const route = useRoute();
onMounted(() => {
  getCollectStatus();
  getBuyStatus();
});
// 是否被预约
const isBuy = ref(false);
const getBuyStatus = async () => {
  const res = await getCartList();
  console.log(res);

  isBuy.value = res.some(
    item =>
      item.buyUserId === useUserStoreHook().userId &&
      item.id === shopStore.shopInfo.id
  );
};
// 收藏
const isCollect = ref(false);
const coolect = async () => {
  const res = await collectItem({
    commodityId: Number(route.query.id)
  });
  if (res.code === 200) {
    isCollect.value = true;
    ElMessage.success("收藏成功");
  }
};
// 取消收藏
const cancel = async () => {
  const res = await cancelItem(Number(route.query.id));
  if (res.code === 200) {
    isCollect.value = false;
    ElMessage.success("取消收藏成功");
  }
};
// 是否被收藏
const getCollectStatus = async () => {
  const res = await searchItemCollect(Number(route.query.id));
  if (res.code === 200) {
    isCollect.value = res.data;
  }
};
const dialogVisible = ref(false);
const time = ref("");
const open = () => {
  time.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
};
const buyShop = () => {
  dialogVisible.value = true;
};
const submit = async () => {
  await addCart(
    JSON.parse(
      JSON.stringify({
        ...shopStore.shopInfo,
        buyUserId: useUserStoreHook().userId,
        buyUserName: useUserStoreHook().username,
        buyTime: time.value
      })
    )
  );
  ElMessage.success("预约成功");
  getBuyStatus();
  router.push("/shopCart/list");
};
</script>

<style lang="scss" scoped>
.goods-info {
  display: flex;
  min-height: 600px;
  background: #fff;

  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }

  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}

.goods-footer {
  display: flex;
  margin-top: 20px;

  .goods-article {
    width: 940px;
    margin-right: 20px;
  }

  .goods-aside {
    width: 280px;
    min-height: 1000px;
  }
}

.goods-tabs {
  min-height: 600px;
  background: #fff;
}

.goods-warn {
  min-height: 600px;
  margin-top: 20px;
  background: #fff;
}
</style>
